<template>
  <router-view v-slot="{ Component, route }">
    <transition
      :name="themeStore.pageAnimateMode"
      mode="out-in"
      :appear="true"
      @before-leave="appStore.setDisableMainXScroll(true)"
      @after-enter="appStore.setDisableMainXScroll(false)"
    >
      <keep-alive
        :include="
          routeStore.keepAliveRoutes.filter(
            (route) => route !== appStore.reloadComponentName
          )
        "
      >
        <component
          :is="Component"
          v-if="appStore.reloadFlag"
          :key="route.fullPath"
          class="flex-grow p-16 bg-#f6f9f8 dark:bg-#101014"
          transition="~ duration-300 ease-in-out"
        />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script setup lang="ts">
import { useAppStore, useRouteStore, useThemeStore } from "@/store";

interface Props {
  /** 显示padding */
  showPadding?: boolean;
}

withDefaults(defineProps<Props>(), {
  showPadding: true,
});

const appStore = useAppStore();
const themeStore = useThemeStore();
const routeStore = useRouteStore();

// 获取keepalive的组件名
routeStore.getKeepAliveRoutes();
</script>

<style scoped></style>
